<!-- 
  @name: 客户明细
  @date: 2020.3.18
 -->
<template>
	<view class="content">
		<!-- 顶部信息 -->
		<view class="topview">
			<view class="info">
				<image class="img" :src="info.userPhoto"></image>
				<view class="msg">
					<view class="top">
						<view class="name">{{info.userName}}</view>
						<view class="icon">
							<view class="i" v-if="info.userType !== 0"></view>
							<text class="text" v-if="info.userType === 1">充值客户</text>
							<text class="text" v-else-if="info.userType === 2">免单客户</text>
							<text class="text" v-else>普通客户</text>
						</view>
					</view>
					<view class="btm">{{info.userPhone}}</view>
				</view>
			</view>
			<view class="total">
				<view class="item">
					<view class="num">{{info.recordNum}}</view>
					<view class="btm">累计加注(kg)</view>
				</view>
				<view class="item">
					<view class="num">{{info.rechargeBalance}}</view>
					<view class="btm">账户余额(元)</view>
				</view>
			</view>
		</view>
		
		<!-- 菜单列表 -->
		<view class="menu">
			<view class="item" v-for="(item, index) in menu" :key="index" @tap="goNext(item, index)">
				<text class="text">{{item.text}}</text>
				<view class="arrow_nav"></view>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="btn_pub_blank"></view>
		<view class="btn_pub bottom delete" @tap="deleteCt">删除</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [
					{ code: 'edit', text: '编辑客户类型', path: './mbedit' },
					{ code: 'fill', text: '加注记录', path: './fillRecord' },
					{ code: 'rech', text: '充值记录', path: './rechargeRec' },
					{ code: 'tick', text: '优惠券', path: '/pages/set-ticket/index' },
					{ code: 'cars', text: '车辆', path: './car' },
					{ code: 'rcdo', text: '充值', path: './recharge' }
				],  //菜单列表
				userId: '',  //客户id
				info: {},  //信息
			}
		},
		onLoad(e) {
			this.userId = e.userId;
			uni.$on('client_changeBalance', this.changeBalance);
			uni.$on('client_changeType', this.changeType);
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.$store.commit('hasLogin');
			}
			this.getInfo();
		},
		onUnload() {
			uni.$off('client_changeBalance', this.changeBalance);
			uni.$off('client_changeType', this.changeType);
		},
		methods: {
			//监听改变用户类型
			changeType(e) {
				this.info.userType = parseInt(e.userType);
			},
			//监听改变用户余额
			changeBalance(e) {
				this.info.rechargeBalance = e.userBalance;
			},
			//前往下级菜单
			goNext(item, index) {
				let url = item.path;
				if(item.code === 'edit' || item.code === 'rcdo') {
					this.$store.commit('setTmpData', JSON.stringify(this.info));
				} else {
					url = url + '?userId=' + this.userId;
				}
				this.$navigateTo(url);
			},
			//获取信息
			getInfo() {
				this.$http({
					url: this.$api.clientUrl + 'getfilloperator',
					data: {
						userId: this.userId
					}
				}).then(res => {
					this.info = res;
				});
			},
			//删除客户
			deleteCt() {
				uni.showModal({
					content: '确认删除该客户吗？',
					confirmColor: '#FF0000',
					confirmText: '删除',
					success: (rs) => {
						if(rs.confirm) {
							this.$http({
								url: this.$api.clientUrl + 'delfilloperator',
								data: {
									userId: this.userId
								}
							}).then(res => {
								this.$successToast('已删除！');
								uni.$emit('client_deleteUser', {
									userId: this.userId
								});
								this.$sucBack();
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部信息 */
	.topview {
		width: 750rpx;
		height: 340rpx;
		background-color: $color-primary;
		.info {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			.img {
				width: 120rpx;
				height: 120rpx;
				margin-left: 40rpx;
				border-radius: $border-radius-circle;
			}
			.msg {
				margin-top: 28rpx;
				margin-left: 37rpx;
				.top {
					display: flex;
					flex-direction: row;
					align-items: center;
					.name {
						font-size: 36rpx;
						color: $color-white;
					}
					.icon {
						width: 150rpx;
						height: 40rpx;
						margin-left: 37rpx;
						border-radius:20px;
						background-color: #185EF6;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						.i {
							width: 30rpx;
							height: 26rpx;
							background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15nNsWAA9tDAAAD2vYMUBg307.png');
						}
						.text {
							margin-left: 8rpx;
							font-style: italic;
							font-size: 20rpx;
							color: $color-white;
						}
					}
				}
				.btm {
					margin-top: 22rpx;
					font-size: 24rpx;
					font-family: $font-family-num;
					color: $color-white;
				}
			}
		}
		.total {
			width: 100%;
			margin-top: 50rpx;
			padding-left: 70rpx;
			display: flex;
			flex-direction: row;
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.num {
					color: $color-white;
					font-weight: 400;
					font-size: 36rpx;
					font-family: $font-family-num;
				}
				.btm {
					margin-top: 10rpx;
					color: $color-white;
					font-size: 24rpx;
					opacity:0.6;
				}
			}
		}
	}
	
	/* 菜单列表 */
	.menu {
		width: 750rpx;
		padding: 0 40rpx;
		background-color: $color-white;
		.item {
			width: 100%;
			height: 96rpx;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.text {
				flex: 1;
			}
		}
		.item:last-child {
			border-bottom: none;
		}
	}
	
</style>
